<template>
  <!--列表 横向卡片 组件-->
  <div class="listItem" @click="handleShow" v-if="staffItem">
    <div class="itemImg">
      <img :src="staffItem.staff_image" alt="厨师" />
    </div>
    <div class="itemTiter">
      <p>
        姓名:<strong>{{ staffItem.staff_name }}</strong>
      </p>
      <p>
        职位:<strong>{{ staffItem.staff_type }}</strong>
      </p>
      <span
        >新资:<strong>{{ staffItem.staff_pay }}</strong> $
      </span>
    </div>
    <!--弹出框-->
    <teleport to="#app">
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop>
          <Wrapper @handleCancel="handleCancel" :staffItem="staffItem" />
        </div>
      </van-overlay>
    </teleport>
  </div>
</template>

<script>
import { ref } from "vue";
import Wrapper from "./Wrapper";
export default {
  name: "SWorkerItem",
  props: ["staffItem"],
  components: { Wrapper },
  setup() {
    const show = ref(false);
    //弹出框
    const handleShow = () => {
      show.value = true;
    };
    //取消弹出框
    const handleCancel = () => {
      show.value = false;
    };
    return { show, handleShow, handleCancel };
  },
};
</script>

<style scoped lang="less">
.listItem {
  width: 100%;
  padding: 0 0.2rem;
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid #576b95;
  border-radius: 0.5rem;
  background-color: #fff;
  box-sizing: border-box;
  .itemImg {
    width: 6rem;
    height: 6rem;
    text-align: center;
    border-radius: 50%;
    margin: 0.3rem 0;
    border: 1px solid #969799;
    overflow: hidden;
    img {
      height: 100%;
      max-width: 100%;
    }
  }
  .itemTiter {
    position: relative;
    flex: auto;
    height: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 0.5rem;
    box-sizing: border-box;
    p {
      width: 100%;
      margin: 0;
      color: #5f5f5f;
      font-size: 0.9rem;
      padding: 0;
      box-sizing: border-box;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      strong {
        color: #e29a51;
        font-size: 0.95rem;
        white-space: nowrap;
      }
      &:nth-child(2) strong {
        color: #4e91d4;
      }
    }
    span strong {
      color: #ff6034;
      font-size: 1.3rem;
    }
  }
}
.wrapper {
  width: 90%;
  margin: auto;
  padding: 1rem 0.8rem;
  border-radius: 0.6rem;
  box-sizing: border-box;
  transform: translate(0, 50%);
  background-color: #fff;
}
</style>
